import { Button, Form, Input, notification, Select, Switch } from 'antd';
import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper, PageLoading } from '@ant-design/pro-layout';
import { useRequest } from 'ahooks';
import { ApiResult } from '@/services/ApiResult';
import routes from '@/routes';
import { history } from '@@/core/history';

export default (props: any) => {

  const settingUseRequest = useRequest<ApiResult<any>>(
    (payload) => routes.apiRoutes.pluginAliyunSettingAccountAccessKeyIdAndSecret(payload),
    {
      onSuccess: (ar, params) => {
        if (ar.code === 1) {
          notification.success({
            message: `配置阿里云AccessKey`,
            description: '操作成功',
          });
        }
      },
      manual: true,
      refreshOnWindowFocus: false,
    },
  );

  return (
    <PageHeaderWrapper>
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        layout="horizontal"
        initialValues={{}}
        onFinish={(formValue) => {
          console.log('form submit payload', formValue);
          settingUseRequest.run(formValue);
        }}
      >
        <Form.Item
          name="accessKeyId"
          label="accessKeyId"
          rules={[
            {
              required: true,
              message: '请输入阿里云账号accessKeyId!',
            },
          ]}
        >
          <Input placeholder='accessKeyId'/>
        </Form.Item>
        <Form.Item
          name="accessKeySecret"
          label="accessKeySecret"
          rules={[
            {
              required: true,
              message: '请输入阿里云账号accessKeySecret!',
            },
          ]}
        >
          <Input placeholder='accessKeySecret'/>
        </Form.Item>


        <Form.Item label=' ' colon={false}>
          <Button type="primary" htmlType="submit" loading={false}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </PageHeaderWrapper>
  );
}
